<template>
	<view class="content">
		<!-- 确认支付弹窗 -->
		<uni-popup :show="type === 'pay'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">输入安全密码</text>
				<view style="padding:40upx 20upx;font-size: 30upx;color: #333;text-align: center;">
					<input type="password" placeholder="请输入安全密码" v-model="safeWord">
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			自动设置
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		<view class="regoodbox">
			<view>
				<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" indicator-active-color="#EC6104"
				 indicator-color='#E0E0E0' @change="gochange">
					<swiper-item v-for="(bitem,bkey) in bannerList" :key="bkey">
						<view class="swiper-item ">
							<view class="good_item">
								<checkbox-group @change="swiperChange">
									<label style="font-size: 28upx;" class="radio">
										<checkbox :value="bkey" color="#EC6104" :checked="bitem.checked" style="transform:scale(0.7)" />
									</label>
								</checkbox-group>
								<!-- <radio-group class=" flex aic " @change="swiperChange">
									<label style="font-size: 28upx;" class="radio">
										<radio value="r1" color="#EC6104" :checked="bitem.checked&&bkey ==bannerIndex"></radio>
									</label>
								</radio-group> -->
								<view class="flex ">
									<image :src="bitem.images" style="height: 186upx;width:186upx;"></image>
									<view style="flex:1;margin-left: 16upx;padding-right: 16upx;">
										<view class="goods-info" style="width: 440upx;color: #333;font-weight: 600;font-size: 26upx;">{{bitem.title}}</view>
										<view style="margin: 30upx 0 8upx;color: #EC6104;font-size: 28upx;">￥{{bitem.price}}</view>
										<view style="color: #999;font-size: 24upx;;" v-if="bitem.integral>0">({{bitem.integral}}VS)</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view style="padding: 0 30upx;font-size: 28upx;color: #333;">
				<view class="flex aic general jsb">
					<view class="flex aic">
						<text style="margin-right: 40upx;">产品抢购次数:</text>
						<!-- :index="cartindex" -->
						<uni-number-box class="step" :min="1" :max="1000" :value="numvalue" :disabled="true" @eventChange="numberChange"></uni-number-box>
					</view>
					<!-- <view>余额：<text style="color: #EC6104;">{{parseInt(userinfo.balance)}}</text></view> -->
				</view>
				<view class="flex aic general">
					<text style="margin-right: 40upx;">抢购成功后是否转让:</text>
					<!-- :index="cartindex" -->
					<view>
						<radio-group class=" flex aic " @change="radioChange">
							<view v-for="(item,index) in radioItems" :key="index" class=" flex aic " style="margin-right: 16upx;">
								<radio :id="item.name" :value="item.name" :checked="item.checked" color="#EC6104"></radio>
								<label class="label-2-text" :for="item.name">
									<text>{{item.value}}</text>
								</label>
							</view>
						</radio-group>
					</view>
				</view>
				<view style="position: relative;" class="flex general" @click="chooseAdd">
					<view style="flex-1">地址:</view>
					<view style="margin-left: 30upx;font-size: 26upx;color: #666;" class="flex-3" v-if="myaddress.name!=undefined">
						<view>收货人：{{myaddress.name}}<text style="margin-left: 10upx;">{{myaddress.tel}}</text></view>
						<view style="margin-top: 16upx;">{{myaddress.province_name}}{{myaddress.city_name}}{{myaddress.county_name}}
							{{myaddress.address}}</view>
					</view>
					<view style="margin-left: 30upx;font-size: 26upx;color: #666;" class="flex-3" v-else>
						<view>请去添加收货地址</view>
					</view>
					<image src="../../static/f-1.png" style="width: 10upx;height: 20upx;position: absolute;top:30upx;right:16upx"></image>
				</view>
				<view class="paybox">
					<view class="flex aic jsb choosetype" @click="showcontent">
						<text>{{paymenttxt==''?'选择支付方式':paymenttxt}}</text>
						<image src="../../static/f-1.png" class="fingle fingle-up"></image>
					</view>
					<view v-show="payshow">
						<view>
							<radio-group @change="payChange">
								<view v-for="(item,index) in typeItems" :key="index" class=" flex aic jsb" style="border-top: 2upx solid #eee;margin-right: 16upx;padding:20upx 20upx;">
									<view class="flex aic">
										<label class="label-2-text" :for="item.name">
											<text>{{item.name}}</text>
										</label>
									</view>
									<radio :id="item.name" :value="index" :checked="item.checked" color="#EC6104" style="transform:scale(0.8)"></radio>
								</view>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="flex jsb general">
					<view style="color: #666;">(VS支付不支持退款、退货)</view>
					<view>支付：<text style="color: #EC6104;">{{paymentindex==0?'￥'+payprice:payprice+'VS'}}</text></view>
				</view>
				<!-- <view class="flex aic fsb general">
					<input type="text" placeholder="请输入验证码" style="font-size: 30upx;"  v-model="yzcode"/>
					<button class="code" @click="dyzm" v-if="flag">发送验证码</button>
					<text style="color: #1D84E8;" v-else>{{last_time}}s </text>
				</view> -->
				<button class="buybtn" @click="buyit">购买</button>
			</view>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import uniNumberBox from '@/components/uni-number-box.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	//倒计时
	export default {
		data() {
			return {
				userToken: '', // token
				type: '', // 弹窗
				// flag: true, //短信验证码倒计时的显示
				// yzcode: '', //短信验证码
				last_time: '',
				safeWord: '', // 安全密码
				myaddress: {}, // 默认的地址
				numvalue: 1, //产品抢购次数
				typeItems:[{
					name:'余额支付',
					checked :true,
					type:'BalancePayment',
					num:0
				},{
					name:'VS支付',
					type:'VoluntaryPayment',
					checked :false,
					num:0
				}],
				paymentindex:0,//支付方式
				paymenttxt:'',
				paymentype:'BalancePayment',
				payshow:false,
				radioItems: [{
					name: 0,
					value: '否',
					checked: true
				}, {

					name: 1,
					value: '是',
					checked: false
				}],
				is_trans: 0, //是否转让 1转让 0 不转让
				bannerList: [], //抢购列表
				payprice: 0,
				bannerIndex: 0, //当前默认的抢购产品index值
				currentgood: {}, //当前抢购产品的信息
				buymin: 0, // 当前产品的最小抢购次数
				buymax: 0, //当前产品的最大抢购次数
				userinfo: {}
			}
		},
		components: {
			uniNumberBox,
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			if (uni.getStorageSync('defultadd')) {
				that.myaddress = JSON.parse(uni.getStorageSync('defultadd'))
			}
			that.getUserInfo()
			that.getList()
		},
		methods: {
			// 返回上一页
			backpage() {
				uni.navigateTo({
					url:'panic'
				})
			},
			// 获取个人信息
			getUserInfo() {
				let that = this
				postAjax('user/Center', {
					token: that.userToken
				}, function(data) {
					console.log(data.data)

					if(data.code==0){
						that.userinfo = data.data
						that.typeItems[0].name = that.typeItems[0].name +'('+data.data.balance+')'
						that.typeItems[1].name = that.typeItems[1].name+'('+data.data.integral+')'
					}else{
						that.getUserInfo()
					}
					

				})
			},
			// 支付方式选择
			payChange(e){
				let that = this
				that.paymentindex= e.detail.value
				that.paymenttxt = that.typeItems[that.paymentindex].name
				that.paymentype = that.typeItems[that.paymentindex].type
				if(that.paymentindex ==0){
					that.payprice = that.currentgood.price * that.numvalue
				}else{
					that.payprice = that.currentgood.integral * that.numvalue
				}	
				setTimeout(function(){
					that.payshow = !that.payshow
				},300)
			},
			showcontent(){
				this.payshow = !this.payshow
			},
			// 弹窗
			buyit() {
				let that = this
				if (that.currentgood.checked == false) {
					uni.showToast({
						icon: 'none',
						title: '请选择产品'
					});
					return
				}
				
				if (that.myaddress.name == undefined) {
					uni.showToast({
						icon: 'none',
						title: '请添加收货地址'
					});
					return
				}
				let mybalance = 0,txt=''
				if(that.paymentindex==0){
					mybalance = that.userinfo.balance
					txt = '余额'
				}else{
					mybalance = that.userinfo.integral
					txt = 'VS'
				}
				if(that.payprice*1 > mybalance*1) {
					uni.showToast({
						icon: 'none',
						title: txt+'不足'
					})
					return
				}
				that.type = 'pay'
			},
			togglePopup(type) {
				this.type = type;
			},
			// 选择地址
			chooseAdd() {
				uni.navigateTo({
					url: '../user/address/index?type=autobuy'
				})
			},
			// 确定设置
			confirmOrder() {
				let that = this
				if (that.safeWord == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入安全密码',
						duration: 1500
					});
					return
				}
				let orderData = {
					goods_id: that.currentgood.id, //产品id
					set_num: that.numvalue, //产品number
					address_id: that.myaddress.id, //地址id
					payment_id: that.paymentype, //支付方式
					paypwd: that.safeWord, //验证方式
					token: that.userToken, //token
					assignment: that.is_trans //是否转让
				}
				postAjax('Panicbuying/AutoBuySettingsAdd', orderData, function(data) {
					if (data.code == 0) {
						uni.showToast({
							icon: 'none',
							title: '添加自动抢购设置成功',
							duration: 1500
						});
						uni.redirectTo({
							url: "panic",
							duration: 1500
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: data.msg
						})
					}
				})
				that.type = ''
			},
			// 获取验证码
			dyzm() {
				let that = this
				postAjax('user/VerifySend', {
					mobile: that.userinfo.mobile
				}, function(data) {
					if (data.code == 0) {
						uni.showToast({
							title: data.msg,
							duration: 1500
						});
						settime(that)
					} else {
						uni.showToast({
							icon: 'none',
							title: data.msg
						})
					}
				})
			},
			// 转让的选择
			radioChange: function(e) {
				this.is_trans = e.detail.value
			},
			// 头部的swiper 
			gochange: function(e) {
				this.bannerIndex = e.detail.current
				this.currentgood = this.bannerList[this.bannerIndex]
				// this.bannerList[this.bannerIndex].checked = true
				// this.buymin = this.currentgood.min_rob > 0 ? Number(this.currentgood.min_rob) : 1
				// this.buymax = this.currentgood.max_rob > 0 ? Number(this.currentgood.max_rob) : 20
				this.numvalue = 1
			},
			// 头部的选择
			swiperChange(e) {
				this.bannerList.forEach(item => {
					this.$set(item, 'checked', false);
				})
				if (e.detail.value[0] == this.bannerIndex) {
					this.bannerList[this.bannerIndex].checked = true
					if(this.bannerList[this.bannerIndex].checked){
						if(this.paymentindex ==0){
							this.payprice = this.currentgood.price * this.numvalue
						}else{
							this.payprice = this.currentgood.integral * this.numvalue
						}	
					}else{
						this.payprice=0
					}
				
				}
			},
			numberChange(data) {
				this.numvalue = data.number
				if (this.currentgood.checked) {
					
					if(this.paymentindex == 0){
						this.payprice = this.currentgood.price * this.numvalue
					}else{
						this.payprice = this.currentgood.integral * this.numvalue
					}
					// if (this.payprice >= this.userinfo.balance) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: '余额不足'
					// 	})
					// 	this.buymax = this.numvalue
					// }
				}
			},
			// 设置的产品抢购列表 设置的只展示5个
			getList() {
				let that = this
				postAjax('Panicbuying/panicbuyinglist', {
					token: that.userToken,
					m: 0,
					n: 5,
					category_id:'894'
				}, function(data) {

					if(data.code==0){
						that.bannerList = data.data
						console.log(data)
						that.bannerList.forEach(item=>{
							that.$set(item, 'checked', false);
						})
						that.currentgood = data.data[0]
						// that.buymin = that.currentgood.min_rob > 0 ? Number(that.currentgood.min_rob) : 1
						// that.buymax = that.currentgood.max_rob > 0 ? Number(that.currentgood.max_rob) : 20
						// that.numvalue = that.buymin
					}else{
						that.getList()
					}
					

				})
			}
		}
	}
</script>

<style>
	.uni-swiper .uni-swiper-dot-active {
		background-color: #1D84E8;
	}

	.general {
		border-top:2upx solid #eee ;
		border-bottom: 2upx solid #eee;
		padding: 20upx 0;
	}

	.flex-1 {
		flex: 1
	}

	.flex-3 {
		flex: 3
	}

	.content {
		min-height: 100vh;
		background-color: #fff;
	}

	.radio {
		position: absolute;
		top: 16upx;
		left: 20upx
	}

	.code::after,
	.buybtn::after {
		border: none;
	}
	.choosetype{padding: 0 40upx 20upx 0;font-size: 30upx;color: #333;margin-top: 24upx;}
	.buybtn {
		color: #fff;
		font-size: 30upx;
		border: none;
		display: block;
		width: 456upx;
		background-color: #EC6104;
		padding: 0;
		margin: 120upx auto 0;
	}

	.code {
		color: #007AFF;
		font-size: 30upx;
		border: none;
		display: inline-block;
		width: 180upx;
		background-color: transparent;
		padding: 0;
		margin: 0;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	uni-radio .uni-radio-input {
		width: 32upx;
		height: 32upx;
	}

	.pageHeader {
		width: 100%;
		height: 128upx;
		background-color: #1D84E8;
		line-height: 128upx;
		position: relative;
		z-index: 10;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 40upx;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	.save {
		display: inline-block;
		font-size: 28upx;
		width: 120upx;
		padding: 0;
		background: none;
		color: #fff;
		position: absolute;
		top: 70upx;
		right: 30upx
	}

	.good_item {
		padding: 20upx 20upx 20upx 70upx;
		background-color: #f9f9f9;
		position: relative;
		width: 100%;
	}

	.save::after {
		border: none;
	}

	.regoodbox {
		padding: 20upx 0
	}

	.modeinp {
		text-align: right;
	}

	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		text-align: center;
		font-size: 28upx;
		color: #666;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
	.fingle{height: 22upx;width: 12upx;}
	.fingle-up{transform: rotate(90deg);}
</style>
